<template>
  <div class="container">
    <el-row>
      <el-col :span="4">
        <Tree
          @handleNodeClick="onNodeClick"
          :dataList="treeDataList"
          :defaultProps="defaultProps"
          :nodeKey="nodeKey"
          :treeLoading="treeLoading"
          :currentNodeKey="currentNodeKey"
          :showCheckbox="true"
        ></Tree>
      </el-col>
      <el-col :span="20" class="right">
        <div class="main">
          <!--        查询条件-->
          <el-row class="row-search">
            <el-col class="form_col">
              <!--            表单-->
              <el-form :model="queryParams" ref="queryForm" :size="formItemSize" v-show="showSearch" :label-width="labelWidth">
                <div id="searchFilter" style="display: flex; flex-wrap: wrap;justify-content: start;">
                  <el-form-item label="顶级建筑" prop="signPlatform">
                    <el-select filterable clearable v-model="queryParams.signPlatform" placeholder="请选择顶级建筑" style="width: 100%;">
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="日期" prop="date">
                    <el-date-picker
                      style="width: 100%"
                      :clearable="false"
                      v-model="queryParams.date"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="能耗类型" prop="signPlatform">
                    <el-select filterable clearable v-model="queryParams.signPlatform" placeholder="请选择能耗类型" style="width: 100%;">
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="报表类型" prop="resource">
                    <el-radio-group v-model="queryParams.resource">
                      <el-radio-button label="1">日</el-radio-button>
                      <el-radio-button label="2">月</el-radio-button>
                      <el-radio-button label="3">年</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="能耗类型" prop="signPlatform">
                    <el-select filterable clearable v-model="queryParams.signPlatform" placeholder="请选择能耗类型" style="width: 100%;">
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="能耗类型" prop="signPlatform">
                    <el-select filterable clearable v-model="queryParams.signPlatform" placeholder="请选择能耗类型" style="width: 100%;">
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-form>
            </el-col>
            <el-col class="form_query" style="line-height: 1;">
              <el-button v-show="collapseAble" type="text" @click="shiftCollapseAble" class="text" size="mini">
              <span>
                {{ fold ? '收起筛选' : '更多筛选' }}
              </span>
              </el-button>
              <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
              <el-button size="mini" @click="resetQuery">重置</el-button>
              <RightDropdown :columns="columns" :showSearch.sync="showSearch" :queryVisible="false" @queryTable="getList"
                             @export="handleExport" style="margin-left: 10px;"></RightDropdown>
            </el-col>
          </el-row>
          <!--        第二行数据展示-->
          <el-row class="row-center" :gutter="20">
            <!--          图表-->
            <el-col :span="10" class="row-center_echarts">
              <div id="main_echarts" class="echarts"></div>
            </el-col>
            <el-col :span="14">
              <div class="header">
                <span class="title">用能排名</span>
              </div>
              <el-row class="content" :gutter="20">
                <el-col :span="11" class="rank-left" style="padding: 0;">
                  <div style="width: 100%;height: 42px;background: linear-gradient(to right, #fff, #d2fff4);"></div>
                  <dv-scroll-board  :config="rankConfigLeft" style="width:100%;height:300px;position: absolute;top: 0;" />
                </el-col>
                <el-col :span="13" class="rank-right">
<!--                  <dv-scroll-ranking-board :config="rankConfigRight" style="width:100%;height:300px" />-->
                  <div class="right-content">
                    <div v-for="(item, index) in rankConfigRight" :key="index">
                      <div class="top">
                        <div class="top-item">
                          <span class="rank" :style="{ color: index < 3 ? '#02ad81' : '' }">{{index + 1}}.</span>
                          <span class="name">{{item.name}}</span>
                        </div>
                        <div class="value" :style="{ color: index < 3 ? '#02ad81' : '' }">{{item.value}}%</div>
                      </div>
                      <div class="progress"><el-progress :percentage="item.value" :strokeWidth="11" :show-text="false"></el-progress></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--        第三行数据展示  表格-->
          <el-row class="row-bottom">
            <el-table ref="table" v-loading="tableLoading" :data="dataList" size="mini" border :height="getAvailableHeight" :max-height="getAvailableHeight" style="margin-top: 10px;">
              <el-table-column type="index" label="#" width="40" align="center"/>
              <!--            <el-table-column label="抄表时间" align="center" prop="readDate" v-if="columns[0].visible" width="180"-->
              <!--                             sortable="custom" :sort-orders="['ascending','descending']"-->
              <!--                             :show-overflow-tooltip="true">-->
              <!--              <template slot-scope="scope">-->
              <!--                <span>{{ parseTime(scope.row.readDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
              <!--              </template>-->
              <!--            </el-table-column>-->
              <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" align="center" :prop="item.prop" v-if="item.visible"  :show-overflow-tooltip="true"/>
            </el-table>
            <pagination :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Tree from '@/components/Tree/index.vue'
import * as echarts from "echarts";

export default {
  name: 'EnergyAnalysis',
  dicts: ['sign_platform'],
  components: {
    Tree
  },
  data(){
    return{
      // 轮播表配置
      rankConfigLeft: {

        data: [
          ['<span class="iconfont icon-diyiming" style="font-size: 28px"></span>', '政府楼', '194.7kW·h'],
          ['<span class="iconfont icon-dierming" style="font-size: 28px"></span>', '政府楼2', '194.7kW·h'],
          ['<span class="iconfont icon-disanming" style="font-size: 28px"></span>', '政府楼3', '194.7kW·h'],
          ['<div>4</div>', '政府楼4', '194.7kW·h'],
          ['<div>5</div>', '政府楼5', '194.7kW·h'],
          ['<div>6</div>', '行6列2', '194.7kW·h'],
          ['<div>7</div>', '行7列2', '194.7kW·h'],
          ['<div>8</div>', '行8列2', '194.7kW·h'],
          ['<div>9</div>', '行9列2', '194.7kW·h'],
          ['<div>10</div>', '行10列2', '194.7kW·hs'],
        ],
        // index: true,
        columnWidth: [50,150],
        rowNum: 7,
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        align: ['center','left','right']
      },
      rankConfigRight: [
        {name:'政府楼', value: 70,},
        {name:'市委楼', value: 50,},
        {name:'征信局', value: 90,},
        {name:'老干部', value: 40,},
        {name:'prj1', value: 30,},
        {name:'prj1', value: 30,},
        {name:'prj1', value: 30,},
      ],
      // 屏幕高度
      screenHeight: null,
      // 区域树数据
      treeDataList: [],
      // 表格数据
      dataList: [],
      // 表格加载状态
      tableLoading: false,
      // 数据总数
      total: 0,
      // 区域树默认配置项
      defaultProps: {
        children: "children",
        label: "sheetsName"
      },
      // 默认展开的节点
      expendOnClickNode: [],
      // 区域树节点标识
      nodeKey: 'sheetsCode',
      // 区域树加载状态
      treeLoading: false,
      // 当前选中的节点
      currentNodeKey: null,
      // 查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        resource:'1',
      },
      // 查询表单的label宽度
      labelWidth: '70px',
      // 表单大小
      formItemSize: 'mini',
      // 是否展示查询栏
      showSearch: true,
      // 展开收起按钮显示状态
      collapseAble: false,
      // fold为false展示-更多筛选 为true展示-收起筛选
      fold: false,
      // 查询栏最多展示的参数
      maxShow: 4,
      // 表格列
      columns: [
        {label: `建筑名称`, visible: true,prop: '',},
        {label: `日期`, visible: true,prop: '',},
        {label: `0时`, visible: true,prop: '',},
        {label: `1时`, visible: true,prop: '',},
        {label: `2时`, visible: true,prop: '',},
        {label: `3时`, visible: true,prop: '',},
        {label: `4时`, visible: true,prop: '',},
        {label: `5时`, visible: true,prop: '',},
        {label: `6时`, visible: true,prop: '',},
        {label: `7时`, visible: true,prop: '',},
        {label: `8时`, visible: true,prop: '',},
        {label: `9时`, visible: true,prop: '',},
        {label: `10时`, visible: true,prop: '',},
        {label: `11时`, visible: true,prop: '',},
        {label: `12时`, visible: true,prop: '',},
        {label: `13时`, visible: true,prop: '',},
        {label: `14时`, visible: true,prop: '',},
        {label: `15时`, visible: true,prop: '',},
        {label: `16时`, visible: true,prop: '',},
        {label: `17时`, visible: true,prop: '',},
        {label: `18时`, visible: true,prop: '',},
        {label: `19时`, visible: true,prop: '',},
        {label: `20时`, visible: true,prop: '',},
        {label: `21时`, visible: true,prop: '',},
        {label: `22时`, visible: true,prop: '',},
        {label: `23时`, visible: true,prop: '',},
        {label: `24时`, visible: true,prop: '',},
      ],
      myChart: null,
      // 图表配置项
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // top: '3%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
    // 获取区域树数据
    this.getTreeList()
    this.initEcharts()
  },

  methods: {
    // 图表自适应
    handleResize() {
      if (this.myChart) {
        this.$nextTick(function () {
          this.myChart.resize();
        })
      }
    },
    // 初始化图表
    initEcharts() {
      const chartDom = document.getElementById('main_echarts'); // 确保 DOM 容器存在
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option);
      // 先移除之前的事件监听器
      window.removeEventListener('resize', this.handleResize);
      // 绑定新的事件监听器
      window.addEventListener('resize', this.handleResize);
      this.handleResize()
    },
    // 查询
    handleQuery() {

    },
    // 重置
    resetQuery() {

    },
    // 导出
    handleExport() {

    },
    // 获取数据
    getList() {

    },
    // 获取户表区域树数据
    getTreeList() {
      this.treeDataList = JSON.parse(localStorage.getItem('meteredTreeData'))
      this.defaultExpandedKeys = [this.treeDataList[0].sheetsCode]

    },
    // 点击区域树节点
    onNodeClick(data) {
      console.log(data,"data")
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.formItemSize}`)
      const len = group?.length ? group?.length : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
  },
  computed: {
    getAvailableHeight() {
      return this.screenHeight - (this.fold ? 665 : 630)
    },
  },
  created() {
    this.screenHeight = document.body.clientHeight
  }

}
</script>
<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  background: whitesmoke;
  overflow: hidden;
}
.right{
  height: 90vh;
  overflow-y: auto;
  padding: 10px 10px;
  .main{
    height: 100%;
    //margin: 10px 10px;
    box-shadow: 0 0 5px #ccc;
    border: 1px solid #DCDFE6;
    background: #fff;
    .row-search{
      //width: 100%;
      padding: 20px 10px 10px 10px;

    }
    .row-center {
      margin-top: 20px;
      .row-center_echarts{
        height: 350px;
        .echarts{
          width: 100%;
          height: 100%;
          //background: red;
        }
        .echarts:after{
          content: "";
          position: absolute;
          height: 300px;
          top: 35px;
          right: 0;
          bottom: 0;
          width: 2px;
          border-right: 2px dotted #ccc;
        }
      }
      .header{
        height: 20px;
        line-height: 20px;
        border-left: 4px solid #00ad80;
        .title{
          font-size: 16px;
          color: #323232;
          margin-right: 30px;
          padding-left: 10px;
        }
      }
      .content{
        margin-top: 15px;
        padding-right: 30px;
        .rank-left{
          position: relative;
          ::v-deep .row-item{
            color: #323232;
            background: transparent;
          }
          ::v-deep .row-item:hover{
            background: linear-gradient(to right, #fff, #d2fff4);
            color: #00ad80;
          }
        }
        .rank-right{
          .right-content{
            height: 300px;
            max-height: 300px;
            overflow-y: auto;
            width: 100%;
            padding: 0 30px;
            .top{
              width: 100%;
              display: grid;
              grid-template-rows: 1fr;
              grid-template-columns: 1fr 3fr;
              font-size: 14px;
              color: #323232;
              .top-item{
                font-size: 14px;
              }
              .value{
                text-align: right;
              }
            }
            .progress {
              margin: 5px 0 15px 0;
              ::v-deep .el-progress-bar__inner{
                background: linear-gradient(to right, #d2fff4, #00ad80);
              }
            }

          }
        }
      }
    }
  }
}




</style>
